<template>
	<!-- 搜索弹窗 -->
	<view class="searchContent">
		<uni-popup ref="searchPopup" type="top">
			<view class="search">
				<input type="text" placeholder-style="color:#999" v-model="searchInfo" placeholder="请输入资产名称搜索">
				<view class="searchIcon">
				<!-- 	<text class="iconfont" style="font-size: 25px;" >&#xe70c;</text> -->
					<uni-icons type="search" size="30" @click="clickSon" color="#2AA37D"></uni-icons>
				</view>
			</view>
			<view class="tigs">
				<view style="margin-bottom: 10px;">搜索记录：</view>
				<view class="tigsItem">
					<view class="item" v-for="(item,index) in searchHistory" key="index" @click="sPar(item)">
						{{item}}
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script lang="ts" setup>
	const emit = defineEmits(['clickFu'])
	const props = defineProps(['show'])
	import {
		ref,
		watch,
		onMounted,
		reactive
	} from 'vue'
	const searchPopup = ref()
	const searchInfo = ref()

	watch(() => props.show, (n) => {
		openPopup()
	})

	function openPopup() {
		// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
		searchPopup.value.open()
	}

	const searchHistory = ref(<string>[])

	onMounted(() => {

		// const par = JSON.parse(localStorage.getItem('searchPar'))
		let par = null
		uni.getStorage({
			key: 'searchPar',
			success: function(res) {
				par = JSON.parse(res.data)
			}
		});
		
		if (par instanceof Array) {
			searchHistory.value = par
		} else {
			console.log('无搜索记录')
		}
	})

	function sPar(ams) {
		searchInfo.value = ams
	}

	function clickSon() {
		if (searchInfo.value) {
			emit('clickFu', searchInfo.value)
			searchHistory.value.unshift(searchInfo.value)
			searchHistory.value = Array.from(new Set(searchHistory.value))
			if (searchHistory.value.length > 11) {
				searchHistory.value.pop();
			}
			uni.setStorage({
				key: 'searchPar',
				data: JSON.stringify(searchHistory.value),
				success: function() {
					console.log('success');
				}
			});
			// localStorage.setItem('searchPar', JSON.stringify(searchHistory.value))
			searchPopup.value.close()
			searchInfo.value = null
		} else {
			uni.showToast({
				icon:'none',
				title:'请输入关键词！'
			})
		}
	}
</script>

<style lang="scss" scoped>
	uni-page-body {
		height: 100%;
	}

	.search {
		padding: 15px;
		background-color: #fff;
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
	}

	.search>input {
		flex: 1;
	}

	.search>view {
		width: 80px;
		text-align: right;
	}

	.tigs {
		padding: 0 15px 15px 15px;
		background-color: #fff;
	}

	.tigsItem {
		display: flex;
		flex-flow: row wrap;
	}

	.item {
		color: #999999;
		padding: 3px 8px;
		border: 1px solid #999999;
		margin: 4px;
		border-radius: 4px;
	}
</style>
